<template>
  <div class="contioner">
    <div class="top">
      <div class="top_left">
        <div class="top_left1">学生每日单词学习情况图</div>
        <div id="top_left1" class="top_left2"></div>
      </div>

      <div class="top_right">
        <div class="top_right1">考试成绩均分示意图</div>
        <div id="top_right1" class="top_right2"></div>
      </div>
    </div>

    <div class="footer">
      <div class="footer_left">
        <div class="footer_left1">论坛当天活跃程度</div>
        <div id="footer_left1" class="footer_left2"></div>
      </div>
      <div class="footer_right">
        <div class="footer_right1">作业提交程度</div>
        <div id="footer_right1" class="footer_right2"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Column } from "@antv/g2plot";
import { Line } from "@antv/g2plot";
import { Liquid } from "@antv/g2plot";
import { Bar } from "@antv/g2plot";
import { getStudentHomework, getStudentWords,getStudentScore } from "@/api/word";
export default {
  data() {
    return {
      topleftdata: [],
      toprightdata: [],
      footerrightdata: [],
    };
  },
  methods: {
    //从数据库获取数据,需要注意的是，这里的数据是异步获取的，所以需要使用async和await
    //g2plot的柱状图的数据格式sales：xxx，没有双引号，从后端获取的数据格式是sales："xxx"，
    //所以需要后端返回数据的时候使用正则表达式或者json.parse转换一下将双引号去掉

    //左上角柱状图获取单词学习情况数据
     async getStudentWord() {
      const abc = await getStudentWords();
      console.log(abc);
      this.topleftdata = abc.data;
      },
    //左上角柱状图
    loadChart() {
      const columnPlot = new Column("top_left1", {
        data: this.topleftdata,
        xField: "type",
        yField: "sales",
        columnWidthRatio: 0.8,
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: "学生姓名",
          },
          sales: {
            alias: "当天学习单词个数",
          },
        },
      });
      columnPlot.render();
    },
    //右上角折线图获取成绩均分数据
    async getStudentScores() {
      const abcd = await getStudentScore();
      console.log(abcd);
      this.toprightdata = abcd.data;
    },
    //右上角折线图
    loadLine() {
      const line = new Line("top_right1", {
        data: this.toprightdata,
        padding: "auto",
        xField: "Date",
        yField: "sales",
        xAxis: {
          // type: 'timeCat',
          tickCount: 5,
        },
        smooth: true,
        meta: {
          Data: {
            alias: "时间",
          },
          sales: {
            alias: "成绩均分",
          },
        },
      });
      line.render();
    },
    //左下角水波图
    loadLiquid() {
      const liquidPlot = new Liquid("footer_left1", {
        percent: 0.25,
      });
      liquidPlot.render();
    },
    //右下角条行图获取学生作业提交情况数据
    async getStudentWorks() {
      const abcde = await getStudentHomework();
      console.log(abcde);
      this.footerrightdata = abcde.data;
    },
    //右下角条行图
    loadBar() {
      const bar = new Bar("footer_right1", {
        data: this.footerrightdata,
        padding: "auto",
        xField: "value",
        yField: "title",
        meta: {
          title: {
            alias: "作业名称",
          },
          value: {
            alias: "人数",
          },
        },
      });
      bar.render();
    },
  },
  //生命周期函数，在实例创建完成后被立即调用
   created() {
     setTimeout(() => {
      this.loadChart();
      this.loadLine();
      this.loadLiquid();
      this.loadBar();
    }, 100);
    this.getStudentWord();
    this.getStudentScores();
    this.getStudentWorks();
  },
};
</script>
<style lang="less" scoped>
.contioner {
  width: 100%;
  height: 70vh;
  .top {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    .top_left {
      width: 48%;
      height: 90%;
      .top_left1 {
        width: 100%;
        height: 10%;
        margin-bottom: 10px;
        background-color: #ffffff;
      }
      .top_left2 {
        width: 100%;
        height: 80%;
        background-color: #ffffff;
      }
    }
    .top_right {
      width: 48%;
      height: 90%;
      .top_right1 {
        width: 100%;
        height: 10%;
        margin-bottom: 10px;
        background-color: #fff;
      }
      .top_right2 {
        width: 100%;
        height: 80%;
        background-color: #fff;
      }
    }
  }
  .footer {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    .footer_left {
      width: 48%;
      height: 90%;
      .footer_left1 {
        width: 100%;
        height: 10%;
        margin-bottom: 10px;
        background-color: #ffffff;
      }
      .footer_left2 {
        width: 100%;
        height: 80%;
        background-color: #ffffff;
      }
    }
    .footer_right {
      width: 48%;
      height: 90%;
      .footer_right1 {
        width: 100%;
        height: 10%;
        margin-bottom: 10px;
        background-color: #fff;
      }
      .footer_right2 {
        width: 100%;
        height: 80%;
        background-color: #fff;
      }
    }
  }
}
</style>